<template>
  <div class="tagEdit">
    <a-dropdown
      v-model="visible"
      @visibleChange="visibleChange"
      v-if="data.name !== this.$i18n('label.mark.as.label')">
      <template slot="overlay">
        <TagDetail
          ref="tagDetailRef"
          :data="data"
          :selectedRows="selectedRows"
          @handleModal="handleModal"
          @handleMenuVisible="handleMenuVisible"
          @changeTagBtnName="changeTagBtnName" />
      </template>
      <a-button>
        {{ this.data.name }}
        <a-icon class="verttical-icon" type="caret-down" />
      </a-button>
    </a-dropdown>
    <a-button v-else @click="handleModal">
      {{ this.data.name }}
    </a-button>
    <TagEditModal
      :visible="modalVisible"
      @handleModal="handleModal"
      @callback="this.data.reloadTagData" />
  </div>
</template>
<script>
  import TagEditModal from './tag-edit-modal/index';
  import TagDetail from './tag-detail/index';

  export default {
    name: 'TagEdit',
    components: {
      TagDetail,
      TagEditModal
    },
    props: {
      data: {},
      selectedRows: {} // 列表选中的数据
    },

    data() {
      return {
        visible: false,
        modalVisible: false
      };
    },

    methods: {
      handleMenuVisible(visible) {
        this.visible = visible;
      },
      visibleChange(visible) {
        !visible && this.$refs.tagDetailRef.bantchUpdateTags();
      },
      handleModal() {
        this.visible = false;
        this.modalVisible = !this.modalVisible;
      }
    }
  };
</script>

<style lang="scss">
  .tagEdit {
    .ant-btn {
      // fiber.css 中是4，这里业务要求是2
      border-radius: 2px;
    }
  }
</style>
